Skip to content

html-08 雪碧图

一、CSS hack

1.属性hack _只有ie6及以下版本会显示这个属性;

*只有ie7及以下版本会显示这个属性;

\9 ie6及以上的ie浏览器显示这个属性(\9放在属性值的后面)

\0 ie8及以上版本显示这个属性;

2.选择符级hack;

*html只有ie6里面会显示;

*+html只有ie7里面会显示;

3.条件hack:用于选择ie浏览器及ie的不同版本。

if条件Hack是HTML级别的(包含但不仅是CSS的Hack,可以选择任何HTML代码块)

if条件共包含6种选择方式:是否、大于、大于或等于、小于、小于或等于、非指定版本

● 大于:选择大于指定版本的IE版本。关键字:gt(greater than)

● 大于或等于:选择大于或等于指定版本的IE版本。关键字:gte(greater than or equal)

● 小于:选择小于指定版本的IE版本。关键字:lt(less than)

● 小于或等于:选择小于或等于指定版本的IE版本。关键字:lte(less than or equal)

● 非指定版本:选择除指定版本外的所有IE版本。关键字:!

只在IE中可见 代码示例:

html
<!--[if IE]>
<p>只在IE中能看到这个段落</p>
<![endif]-->



<!--[if IE 8]>
<style></style> //这里面写的只有ie8能显示
<![endif]-->

<!--[if IE]>
<p>只在IE中能看到这个段落</p>
<![endif]-->

二、用css的border设置三角形,在ie6里面不兼容的问题。

1.在ie6里面transparent不兼容,显示黑色。

解决办法,把需要设置透明的边框设置成点状或虚线。

2.在ie6里面设置左边或者右边的三角形,会少个尖儿。

是因为ie6里面的最小高度引起的问题。

解决办法:给这个元素设置font-size:0;line-height:0;overflow:hidden。

三、banner图布局

1.先切片将左右两边的宽度相等,留下中间的部分,如果页面宽度是1920,则设置宽度为100%; 2.切中间的一块,如果不准确,可以修改一下切片宽度,

四、大背景布局,

五、透明

1.rgba 设置背景透明

a表示alpha取值:从0到1,数值越大,越不透明;

background:rgba(0,0,0,0.8);

2.ie浏览器兼容性

opacity 设置元素的不透明度。(元素文字都透明)

取值:从0到1,数值越大,越不透明

opacity: 0.5;

filter:alpha(opacity=50);

六、雪碧图,精灵图,css sprites;

优点:

(1)减少网页的http请求,从而大大的提高页面的性能

(2)图片命名上的困扰。

(3)更换风格方便。

缺点:

(1)必须要限定容器大小,复合背景图元素位置需要计算。

(2)维护的时候比较麻烦,如果页面背景有少许改动,一般就要改这张合并的图片。

七、常用的图片格式

1.jpg 优点:色彩丰富,文件小。

缺点:有损压缩,反复保存,图片质量下降明显。

使用场景:色彩丰富的图片/渐变图像。

2.gif 优点:文件小,支持动画,透明,无兼容性问题。

缺点:只支持256种颜色,色彩简单的logo/icon/动图

使用场景:色彩简单的logo/icon/动图。

3.png 优点:无损压缩,支持透明,简单图片尺寸小。

缺点:不支持动画,色彩丰富的图片尺寸大。

使用场景:logo/icon/透明图。

面试题

● 用纯CSS实现小箭头的思路?

● 简述精灵图的原理及优缺点?

● 简述网页中常见图片格式及特点?

Released under the MIT License.